import { Button } from "antd";
import { formatQsTObject, router } from "@/utils/common";
import { useLocation, useParams, withRouter } from "react-router-dom";
import { useMemo, useCallback, PureComponent } from "react";

// 编程式导航
const Control = withRouter((props) => {
  // 返回首页方法 也可以用useHistory 不需要用withRouter
  // const  history  =useHistory()
  const { history } = props;
  const handleBackToMain = useCallback(() => {
    history.push("/");
  }, []);

  return (
    <div>
      <h4>Control</h4>
      <Button type="primary" onClick={handleBackToMain}>
        返回首页
      </Button>
    </div>
  );
});
export default function AppDetailExample(props) {
  const { match, location } = props;
  // const { id } = match.params;
  const { id } = useParams();
  const { search } = useLocation();
  console.log("传过来的props", props);
  // 针对路由变化 有useMemo缓存
  const query = useMemo(() => formatQsTObject(search), [search]);

  // 需要解析字符串
  return (
    <div>
      AppDetailExample-{id}
      <pre>{JSON.stringify(query, null, 2)}</pre>
      <Control />
    </div>
  );
}
// export default class AppDetailExample extends PureComponent {
//   // componentDidUpdate(props) {
//   //   const { id } = this.props.match.params;
//   //   const { id: oldId } = props.match.params;
//   //   if (id != oldId) {
//   //     console.log("id变化了");
//   //   }
//   // }
//   // componentDidMount listen方法监听
//   // componentDidMount(){
//   //   ruter.history.listen(()=>{

//   //   })
//   // }

//   render() {
//     const { match, location } = this.props;
//     const { id } = match.params;
//     console.log("传过来的props", this.props);
//     // 类组件自己监听做缓存
//     const query = formatQsTObject(location.search);

//     // 需要解析字符串
//     return (
//       <div>
//         AppDetailExample-{id}
//         <pre>{JSON.stringify(query, null, 2)}</pre>
//         <Control />
//       </div>
//     );
//   }
// }
